@import "../../../../_public/less/_core.less";
@import "../../less/photography.less";

.labs-list-pager {
  background: #dee3e7;
}

/**实验室列表**/

.labs-header {
  position: relative;
  background: no-repeat center center #f4f1ec;
  background-size: auto 100%;
  min-height: 200px;
  max-height: 400px;
  overflow: hidden;
  .photography();
  &:before {
    content: '';
    display: block;
    padding-top: 21%;
  }
}

.labs-sub-header {
  min-height: 50px;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, .2);
  .labs-profile-card {
    position: absolute;
    top: -60px;
    left: 10px;
    width: 140px;
    box-shadow: 5px 5px 5px -4px rgba(0, 0, 0, .2);
    a {
      display: block;
      height: 120px;
      padding-top: 1px;
      background-color: #fafafa;
      transition: .2s;
      line-height: 20px;
      font-size: 16px;
      text-align: center;
      color: #000;
      &:hover {
        color: #000;
        background-color: #eee;
      }
    }
    .profile-icon {
      display: block;
      height: 18px;
      margin: 25px auto;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
  .notice {
    padding: 16px 0 16px 160px;
    line-height: 20px;
    font-size: 14px;
    color: #333;
  }
}

@media (max-width: 600px) {
  .labs-sub-header {
    padding: 15px;
    .labs-profile-card {
      position: static;
      margin: auto;
    }
    .notice{
      padding: 15px;
    }
  }
}

.labsList {
  min-height: 400px;
}

.post-list {
  padding: 40px 0;
}

.post-item {
  display: block;
  position: relative;
  margin-bottom: 20px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  background: #000;
  overflow: hidden;
  .data {
    position: absolute;
    top: -36px;
    left: 0;
    width: 100%;
    height: 36px;
    background: #222;
    span {
      display: inline-block;
      height: 36px;
      padding-left: 20px;
      line-height: 36px;
      font-size: 12px;
      color: #ccc;
      svg {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        margin-right: 5px;
        fill: #ccc;
      }
    }
  }
  .cover {
    background-color: #555;
    background-size: cover;
    background-position: center;
    &:before {
      content: '';
      display: block;
      padding-top: 100%;
    }
  }
  .intro {
    height: 130px;
    background: #fff;
  }
  .title {
    height: 50px;
    padding-left: 20px;
    line-height: 50px;
    font-size: 16px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desc {
    height: 64px;
    padding: 0 20px;
    line-height: 16px;
    font-size: 12px;
    color: #888;
    overflow: hidden;
  }

}

@media (min-width: 1024px) {
  .post-item {
    padding-bottom: 50px;
    .intro {
      position: absolute;
      width: 100%;
      left: 0;
      top: 100%;
      margin-top: -50px;
    }
    .data,
    .cover,
    .intro {
      .transition(.2s, ease-in-out);
      .transition-delay(.1s);
    }
    &:hover {
      .data {
        .transform(translate(0, 36px));
      }
      .cover {
        opacity: .6;
        .transform(translate(0, -20px));
      }
      .intro {
        .transform(translate(0, -80px));
      }
    }
  }

}

.labs-list-pager-pano {
  .profile-icon {
    background-image: url('');
  }
}

.labs-list-pager-photography {
  .profile-icon {
    background-image: url('');
  }
}

.labs-list-pager-fe {
  .profile-icon {
    background: url('data:image/svg+xml;utf8,<svg fill="#333" viewBox="0 0 2880 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M1185.92 769.92h-1.28c0.576 0 0.96 0.64 1.536 0.704h0.384l-0.64-0.64z m0.256 0.704c-5.952 0.064-20.928 3.2-36.736 3.2-49.92 0-67.2-23.04-67.2-53.12V520.32h101.76c5.76 0 10.24-5.12 10.24-12.16v-108.8c0-5.76-5.12-10.88-10.24-10.88h-101.76V253.44c0-5.12-3.2-8.32-8.96-8.32h-138.24c-5.76 0-8.96 3.2-8.96 8.32v138.88s-69.76 17.28-74.24 17.92c-5.12 1.28-8.32 5.76-8.32 10.88v87.04c0 7.04 5.12 12.16 10.88 12.16h71.04v209.92c0 156.16 108.8 172.16 183.04 172.16 33.92 0 74.88-10.88 81.28-14.08 3.84-1.28 5.76-5.76 5.76-10.24v-96a11.328 11.328 0 0 0-9.344-11.52z m1516.544-140.8c0-115.84-46.72-131.2-96-126.08-38.4 2.56-69.12 21.76-69.12 21.76v225.28s31.36 21.76 78.08 23.04c65.92 1.92 87.04-21.76 87.04-144z m155.52-10.24c0 219.52-71.04 282.24-195.2 282.24-104.96 0-161.28-53.12-161.28-53.12s-2.56 29.44-5.76 33.28c-1.92 3.84-5.12 5.12-8.96 5.12h-94.72c-6.4 0-12.16-5.12-12.16-10.88l1.28-711.04c0-5.76 5.12-10.88 10.88-10.88h136.32c5.76 0 10.88 5.12 10.88 10.88v241.28s52.48-33.92 129.28-33.92l-0.64-1.28c76.8 0 190.08 28.8 190.08 248.32z m-558.08-231.04H2165.76c-7.04 0-10.88 5.12-10.88 12.16v348.16s-35.2 24.96-83.2 24.96-62.08-21.76-62.08-69.76V400c0-5.76-5.12-10.88-10.88-10.88h-136.96c-5.76 0-10.88 5.12-10.88 10.88v327.04c0 140.8 78.72 176 186.88 176 88.96 0 161.28-49.28 161.28-49.28s3.2 24.96 5.12 28.8c1.28 3.2 5.76 5.76 10.24 5.76h85.76c7.04 0 10.88-5.12 10.88-10.88l1.28-478.08c0-5.76-5.12-10.88-12.16-10.88z m-1516.8-0.64h-136.32c-5.76 0-10.88 5.76-10.88 12.8v469.76c0 12.8 8.32 17.28 19.2 17.28h122.88c12.8 0 16-5.76 16-17.28V398.72c0-5.76-5.12-10.88-10.88-10.88z m-67.2-216.32c-49.28 0-88.32 39.04-88.32 88.32 0 49.28 39.04 88.32 88.32 88.32 48 0 87.04-39.04 87.04-88.32 0-49.28-39.04-88.32-87.04-88.32z m1055.36-16h-135.04c-5.76 0-10.88 5.12-10.88 10.88v261.76h-211.84V166.4c0-5.76-5.12-10.88-10.88-10.88h-136.32c-5.76 0-10.88 5.12-10.88 10.88v711.04c0 5.76 5.76 10.88 10.88 10.88h136.32c5.76 0 10.88-5.12 10.88-10.88V573.44h211.84l-1.28 304c0 5.76 5.12 10.88 10.88 10.88h136.32c5.76 0 10.88-5.12 10.88-10.88V166.4c0-5.76-5.12-10.88-10.88-10.88zM563.84 470.4v367.36c0 2.56-0.64 7.04-3.84 8.32 0 0-80 56.96-211.84 56.96-159.36 0-348.16-49.92-348.16-378.88S165.12 127.36 326.4 128c139.52 0 195.84 31.36 204.8 37.12 2.56 3.2 3.84 5.76 3.84 8.96L508.16 288c0 5.76-5.76 12.8-12.8 10.88-23.04-7.04-57.6-21.12-138.88-21.12-94.08 0-195.2 26.88-195.2 238.72s96 236.8 165.12 236.8c58.88 0 80-7.04 80-7.04v-147.2H312.32c-7.04 0-12.16-5.12-12.16-10.88V470.4c0-5.76 5.12-10.88 12.16-10.88h239.36c7.04 0 12.16 5.12 12.16 10.88z"></path></svg>');
  }
}